<template>
	<el-card class="box-card">
		<el-container>
			<el-container style="line-height: 50px">
				<i class="el-icon-s-fold" style="font-size: 20px"></i>&nbsp;&nbsp;&nbsp;
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item style="font-size: 20px">首页</el-breadcrumb-item>
				</el-breadcrumb>
			</el-container>
		</el-container>
		<el-container>
			<el-container>
				<i class="el-icon-s-marketing" style="font-size: 15px"></i>&nbsp;&nbsp;&nbsp;
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item style="font-size: 15px">经营数据</el-breadcrumb-item>
				</el-breadcrumb>
			</el-container>
			<el-container style="position: relative">
				<div style="position: absolute; right: 0; bottom: 10px">
					<div class="block">
						<el-date-picker
						      v-model="time"
							  @change="changes"
						      type="date"
							  value-format="yyyy-MM-dd"
						      placeholder="选择日期">
						    </el-date-picker>
					</div>
				</div>
			</el-container>
		</el-container>
		<el-container style="height: 200px; margin-top: 0">
			<div class="jy" style="background-color: #34cc5f">
				<i class="el-icon-coin"></i>
				<span class="s1">今日订单总额(元)</span>
				<span class="s2">{{IndentCountPrice}}</span>
			</div>
			<div class="jy" style="background-color: #9150e8">
				<i class="el-icon-s-order"></i>
				<span class="s1">今日订单总数</span>
				<span class="s2">{{IndentCount}}</span>
			</div>
			<div class="jy" style="background-color: #458efd">
				<i class="el-icon-s-custom"></i>
				<span class="s1">今日新增用户数</span>
				<span class="s2">{{UsersByDay}}</span>
			</div>
			<div class="jy" style="background-color: #ff7823">
				<i class="el-icon-plus"></i>
				<span class="s1">今日新增商户</span>
				<span class="s2">{{MerchantALL}}</span>
			</div>
		</el-container>

		<el-container style="margin: 0 auto">
			<div class="ddtj">
				<el-container>
					<i class="el-icon-s-marketing" style="font-size: 15px"></i>&nbsp;&nbsp;&nbsp;
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item style="font-size: 15px">订单统计</el-breadcrumb-item>
					</el-breadcrumb>
				</el-container>
				<div id="t1" style="
						width: 300px;
						height: 300px;
						padding: 15px;
						border-top: 1px solid #c4c4c4;
					"></div>
			</div>

			<div class="ddtj" style="margin: 0 auto">
				<el-container>
					<i class="el-icon-s-marketing" style="font-size: 15px"></i>&nbsp;&nbsp;&nbsp;
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item style="font-size: 15px">救援任务统计</el-breadcrumb-item>
					</el-breadcrumb>
				</el-container>
				<div id="t2" style="
						width: 300px;
						height: 300px;
						padding: 15px;
						border-top: 1px solid #c4c4c4;
					"></div>
			</div>

			<div class="ddtj1" style="margin: 0 auto">
				<el-container style="margin-bottom: 50px; border-bottom: 1px solid #c4c4c4">
					<i class="el-icon-s-marketing" style="font-size: 15px"></i>&nbsp;&nbsp;&nbsp;
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item style="font-size: 15px">用户概况</el-breadcrumb-item>
					</el-breadcrumb>
				</el-container>
				<div style="
						border: 2px solid #c4c4c4;
						display: inline-block;
						width: 25%;
						margin: 0 auto;
						border-radius: 10px;
						padding: 10px;
						height: 180px;
					">
					<el-container>
						<i class="el-icon-s-marketing" style="font-size: 20px"></i>&nbsp;&nbsp;&nbsp;
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item style="font-size: 20px">商户数</el-breadcrumb-item>
						</el-breadcrumb>
					</el-container>
					<div class="yhgk">{{MerchantALLcount}}</div>
				</div>
				<div style="display: inline-block; width: 20px"></div>
				<div style="
						border: 2px solid #c4c4c4;
						display: inline-block;
						width: 25%;
						margin: 0 auto;
						border-radius: 10px;
						padding: 10px;
						height: 180px;
					">
					<el-container>
						<i class="el-icon-s-marketing" style="font-size: 20px"></i>&nbsp;&nbsp;&nbsp;
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item style="font-size: 20px">新增用户数</el-breadcrumb-item>
						</el-breadcrumb>
					</el-container>
					<div class="yhgk">{{UsersByDay}}</div>
				</div>
				<div style="display: inline-block; width: 20px"></div>
				<div style="
						border: 2px solid #c4c4c4;
						display: inline-block;
						width: 25%;
						margin: 0 auto;
						border-radius: 10px;
						padding: 10px;
						height: 180px;
					">
					<el-container>
						<i class="el-icon-s-marketing" style="font-size: 20px"></i>&nbsp;&nbsp;&nbsp;
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item style="font-size: 20px">累计用户数</el-breadcrumb-item>
						</el-breadcrumb>
					</el-container>
					<div class="yhgk">{{UserCount}}</div>
				</div>
			</div>
		</el-container>
		<el-container>
			<div style="width: 100%; height: 250px">
				<el-container>
					<i class="el-icon-s-marketing" style="font-size: 15px"></i>&nbsp;&nbsp;&nbsp;
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item style="font-size: 15px">注册用户分析</el-breadcrumb-item>
					</el-breadcrumb>
				</el-container>
				<div id="t3" style="
						margin: 0 auto;
						width: 100%;
						height: 250px;
						padding: 0px;
						border-top: 1px solid #c4c4c4;
					"></div>
			</div>
		</el-container>
	</el-card>
</template>
<script>
	import * as echarts from "echarts";
	export default {
		data() {
			return {
				value1: "",
				IndentCount: '',
				IndentCountPrice: '',
				MerchantALL: '',
				MerchantALLcount:'',
				UserCount:'',
				time:'2023-05-19',
				UsersByDay:''
			};
		},
		methods: {
			changes() {
				this.IndentCount= '',
				this.IndentCountPrice='',
				this.MerchantALL= '',
				this.MerchantALLcount='',
				//this.UserCount:'',
				//time:'2023-05-19',
				this.UsersByDay=''
			            // 确定时间范围之后触发的函数
						this.selectIndentCount();
									this.selectIndentCountPrice();
									this.selectMerchantALL();
									this.selectMerchantALLcount();
									this.selectUserCount();
									this.selectUsersByDay();
			        },
			// 查询订单总量
			selectIndentCount() {
				let params = new URLSearchParams();
				params.append("time", this.time)
				this.$http.post("selectIndentCount", params).then(res => {
					if (res.data.code == 200) {
						// 查询成功
						this.IndentCount = res.data.data;
					}
				})
			},

			// 查询订单总额
			selectIndentCountPrice() {
				let params = new URLSearchParams();
				params.append("time",this.time)
				this.$http.post("selectIndentCountPrice", params).then(res => {
					if (res.data.code == 200) {
						// 查询成功
						this.IndentCountPrice = res.data.data;
					}
				})
			},
			// 查询商户总数
			selectMerchantALL() {
				let params = new URLSearchParams();
				params.append("time", this.time)
				this.$http.post("selectMerchantALL", params).then(res => {
					if (res.data.code == 200) {
						// 查询成功
						this.MerchantALL = res.data.data;
					}
				})
			},
			// 查询所有商户总数
			selectMerchantALLcount() {
				let params = new URLSearchParams();
				
				this.$http.post("selectMerchantALL", params).then(res => {
					if (res.data.code == 200) {
						// 查询成功
						this.MerchantALLcount = res.data.data;
					}
				})
			},
			selectUserCount(){
				this.$http.get("selectUserCount").then(res => {
					if (res.data.code == 200) {
						// 查询成功
						this.UserCount = res.data.data;
					}
				})
			},
			selectUsersByDay(){
				let params = new URLSearchParams();
				params.append("time",this.time)
				this.$http.post("selectUsersByDay", params).then(res => {
					if (res.data.code == 200) {
						// 查询成功
						this.UsersByDay = res.data.data;
					}
				})
			}
		},
		async mounted() {
			this.selectIndentCount();
			this.selectIndentCountPrice();
			this.selectMerchantALL();
			this.selectMerchantALLcount();
			this.selectUserCount();
			this.selectUsersByDay();
			var myChart = echarts.init(document.getElementById("t1"));
			let option1= {
							tooltip: {
								trigger: "item",
							},
							series: [
								{
									name: "Access From",
									type: "pie",
									radius: "50%",
									data: [
										{ value: 1048, name: "Search Engine" },
										{ value: 735, name: "Direct" },
										{ value: 580, name: "Email" },
										{ value: 484, name: "Union Ads" },
										{ value: 300, name: "Video Ads" },
									],
									emphasis: {
										itemStyle: {
											shadowBlur: 10,
											shadowOffsetX: 0,
											shadowColor: "rgba(0, 0, 0, 0.5)",
										},
									},
								},
							],
						};
						
			this.$http.post("selectIndentTypeShow").then(res =>{
							if(res.data.code==200){
								//console.log(option1.series[0].data)
								// 查询成功
								option1.series[0].data = res.data.data;
								//console.log(option1.series[0].data)
								
											
								myChart.setOption(option1);
								 
							}
						})
			// myChart.setOption(option1);



			var myChart2 = echarts.init(document.getElementById("t2"));
			let option2 = {
				tooltip: {
					trigger: "item",
				},
				series: [{
					name: "Access From",
					type: "pie",
					radius: "50%",
					data: [{
							value: 1048,
							name: "Search Engine"
						},
						{
							value: 735,
							name: "Direct"
						},
						{
							value: 580,
							name: "Email"
						},
						{
							value: 484,
							name: "Union Ads"
						},
						{
							value: 300,
							name: "Video Ads"
						},
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)",
						},
					},
				}, ],
			}
			
			 this.$http.get("selectRescueGroupbystatus").then(res =>{
						 	if(res.data.code==200){
						 		//console.log(option3.series[0].data)
						 		// 查询成功
						 		option2.series[0].data = res.data.data;
						 		//console.log(option2.series[0].data)
						 		 myChart2.setOption(option2);
						 	}
						 })
			


			var myChart3 = echarts.init(document.getElementById("t3"));
			let option3 = {
				xAxis: {
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				},
				yAxis: {
					type: "value",
				},
				series: [{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: "bar",
				}, ],
			};
			this.$http.get("selectUser30Day").then(res =>{
									 	if(res.data.code==200){
									 		//console.log(option3.series[0].data)
									 		// 查询成功
									 		option3.xAxis.data = res.data.data[0];
											option3.series[0].data = res.data.data[1]
									 		//console.log(option2.series[0].data)
									 		 myChart3.setOption(option3);
									 	}
									 })
			
		},
	};
</script>
<style scoped>
	.yhgk {
		margin: 60px 35px;
		font-size: 30px;
	}

	.ddtj {
		width: 300px;
	}

	.ddtj1 {
		width: 800px;
	}

	.box-card {
		height: 99%;
	}

	span {
		font-family: "微软雅黑";
	}

	.jy {
		border-radius: 10px;
		width: 280px;
		height: 120px;
		margin: 20px auto;
		color: aliceblue;
	}

	.el-icon-coin,
	.el-icon-s-order,
	.el-icon-s-custom,
	.el-icon-plus {
		float: right;
		font-size: 50px;
		margin-right: 20px;
		margin-top: 50px;
	}

	.s1 {
		display: block;
		margin-top: 20px;
		font-size: 20px;
		margin-left: 40px;
	}

	.s2 {
		display: block;
		margin-top: 20px;
		font-size: 20px;
		margin-left: 40px;
	}
</style>
